<html>
<head>
    <title>区域管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">区域管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">

                    <dev-tree ref="devTree" v-on:click-node="onTreeNode"  :tabsign="'z'" :energy="'Total'" ></dev-tree>


            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form  label-width="80px" :model="zoneForm" ref="zoneForm" :disabled="editMod">
                        <el-form-item label="区域名称">
                            <el-input v-model="zoneForm.zone_name" style="width: 15%;"></el-input>
                        </el-form-item>

                        <el-form-item label="类型">
                            <el-checkbox-group v-model="checkedTypes" size="medium">
                                <el-checkbox-button v-for="item in types" :label="item.str" :key="item.str">{{item.name}}</el-checkbox-button>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item>
                            <el-row>
                              <el-button type="primary" @click="saveBtn()" >保存</el-button>

                                <el-button @click="delBtn()">删除</el-button>
                            </el-row>
                        </el-form-item>
                    </el-form>
                    <el-row style="margin:0px 30px 20px 80px">
                    <el-button @click="addZone()">新增区域</el-button>
                    </el-row>
                    <el-dialog
                            title="增加区域"
                            :visible.sync="addFormVisible"
                            width="45%"
                           >
                        <el-card>
                            <el-form  label-width="80px" :model="newZoneForm" ref="newZoneForm">
                                <el-form-item label="区域名称">
                                    <el-input v-model="newZoneForm.zone_name" style="width: 15%;"></el-input>
                                </el-form-item>
                                <el-form-item label="类型">
                                    <el-checkbox-group v-model="checkedTypes2" size="medium">
                                            <el-checkbox-button v-for="item in types" :label="item.str" :key="item.str">{{item.name}}</el-checkbox-button>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <br/>

                        <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="cancleChild()">取消</el-button>
                    <el-button type="primary" @click="submitChild()"
                               style="text-align: center">确定</el-button>
            </span>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </div>


</div>



<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            zoneForm:{
                electric:0,
                water:0,
                gas:0,
                coal:0,
                heat:0,
                oil:0,
                steam:0,
                air:0
            },
            newZoneForm:{
            },
            expandId:'',
            zoneList:'',
            types:[{name:'电',str:'electric'},{name:'水',str:'water'},{name:'气',str:'gas'},
                {name:'媒',str:'coal'},{name:'热',str:'heat'},{name:'油',str:'oil'},{name:'蒸汽',str:'steam'},{name:'空气',str:'air'}],
            checkedTypes:[],
            checkedTypes2:[],
            addFormVisible:false,
            editMod:true,
            currentId:'',
            currentProNo:'',
            number:2,
        },
        methods:{

            onTreeNode:function(data){
                this.currentId = data.id;
                var ids =this.currentId.split('_');
                if(ids[0]=="P"){
                    HttpUtil.get('Project/List',{id:ids[1]}).success((res)=>{
                        this.currentProNo = res.data[0].projectNo;
                    })
                }
                if (ids[0] =="Z"){
                    this.editMod = false;
                    HttpUtil.get('Zone/List',{zoneId:ids[1]}).success((res)=>{
                    this.zoneForm = res.data[0];
                    var checkedData = [];
                        for (var item of this.types){
                            if (res.data[0][item.str] == 1){
                                checkedData.push(item.str);
                            }
                        }
                        this.checkedTypes = checkedData;
                    });
                } else {
                    this.zoneForm ={};
                    this.checkedType = [];
                    this.editMod = true;
                }
            },
            addZone:function(){
                var ids =this.currentId.split('_');
                if (ids[0]=='Z'||ids[0]=="P") {
                    this.addFormVisible = true;
                }else {
                    this.$message({
                        type: 'warning',
                        message: '请选择项目或者区域'
                    });
                }

            },
            saveBtn:function () {
             for (var item of this.types){
                 this.zoneForm[item.str] = 0;
             };
             for (var item of this.checkedTypes){
                 this.zoneForm[item] = 1;
             };
             console.log(this.zoneForm);
                HttpUtil.get('Zone/Delete',this.zoneForm).success((res)=>{
                 this.$message({
                     type: 'success',
                     message: '修改成功'
                 });
                  location.reload();
             })

            },
            delBtn:function () {
                var ids =this.currentId.split('_');
                HttpUtil.get('Zone/Delete',{zone_id: ids[1]}).success((res)=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    location.reload();
                })
            },
            cancleChild:function () {
                this.newZoneForm={};
                this.checkedTypes2=[];
                this.addFormVisible = false;
            },
            submitChild:function () {
                for (var item of this.types){
                    this.newZoneForm[item.str] = 0;
                };
                for (var item of this.checkedTypes2){
                    this.newZoneForm[item] = 1;
                };
                this.newZoneForm.projectNo = this.currentProNo;
                var ids =this.currentId.split('_');
                if (ids[0]=="Z") {
                 this.newZoneForm.zone_pid = this.zoneForm.zone_id;
                }
                console.log(this.newZoneForm);
                this.newZoneForm.isBuild = 0;
                HttpUtil.get('Zone/Add',this.newZoneForm).success((res)=>{
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                    location.reload();
                })

            }
        },
        created:function(){
            HttpUtil.get('Zone/List',{}).success((res)=>{
                this.zoneList = res.data;
            });

        },
        mounted:function(){
        }
    });


</script>

</body>
</html>
